import React from 'react';
import './style.scss';
import { Flex } from 'antd-mobile';
import History from 'lib/history'

export default class SearchHeader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            placeholder: '美食',
        };
    }
    onChange = event => {
        let value = event.target.value
        this.setState({ value });
    }
    push(name) {
        History.push(`/index/${name}`)
    }
    render() {
        return (
            <header className="search-index">
                <Flex justify="center" align="center">
                    <Flex.Item>
                        <div className="classification middle-center" onClick={this.push.bind(this, 'classification')}><i className="iconfont icon-classification"></i></div>
                    </Flex.Item>
                    <Flex.Item className="flex_1 inputBox">
                        <div className="search-input-box">
                            <input className="search-input" placeholder={this.state.placeholder} type="text" value={this.state.value} onChange={this.onChange} />
                            <i className="iconfont icon-search"></i>
                        </div>

                    </Flex.Item>
                    <Flex.Item>
                        <div className="mine middle-center" onClick={this.push.bind(this, 'mine')}><i className="iconfont icon-mine"></i></div>
                    </Flex.Item>
                </Flex>
            </header>
        )
    }
}